<template>
	<view class="popup" v-if="isShow">
		<view class="popup-box">
			<view class="popup-title">
				提示
			</view>
			<view class="popup-text">{{textWord}}</view>
			<view class="popup-btn">
				<button @click="closeBtn" class="close">取消</button>
				<button @click="submitBtn">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"showModel",
		props:{
			textWord:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isShow: false,
			};
		},
		methods:{
			openModel(){
				this.isShow = true
			},
			closeBtn(){
				this.isShow = false
			},
			submitBtn(){
				this.isShow = false
				this.$emit('bindChange')
			}
		}
	}
</script>

<style lang="less">
	.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;

		.popup-box {
			width: 80%;
			border-radius: 32upx;
			background: linear-gradient(180deg, #CDDAF8 0%, #FFFFFF 23%);
			padding: 20upx 40upx;
			box-sizing: border-box;

			.popup-title {
				width: 100%;
				line-height: 72upx;
				text-align: center;
				padding-top: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #1A1A1A;
			}
			.popup-text{
				width: 100%;
				line-height: 72upx;
				text-align: center;
				padding-top: 10upx;
				font-size: 28upx;
				color: #1A1A1A;
			}
			.popup-btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			button {
				width: 55%;
				border-radius: 120upx;
				background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
				color: #fff;
				margin-top: 40upx;
				font-size: 32upx;
				line-height: 92upx;
			}

			.close {
				width: 35%;
				color: #51A5FF;
				background: #EAF4FF;
				box-sizing: border-box;
				border: 1px solid #68ADF8;
			}
		}
	}
</style>